<template>
  <div>
    <div style="margin-top: 10px">
      <el-input v-model="keywords" placeholder="搜索订单..." prefix-icon="el-icon-search"
                style="width: 220px;margin-right: 10px" size="medium"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="doSearch" size="medium">搜索</el-button>
    </div>
    <div class="user-container">
      <el-card class="user-card" v-for="(history,index) in tableData" :key="index">
        <div>
          <div class="img-container">
            <el-tooltip class="item" effect="dark" content="点我查看订单详情！" placement="top">
              <img :src="history.imgurl" class="avatar_img" @click="showEditView(history)">
            </el-tooltip>

            <div cLass="userinfo-container">
              <el-divider content-position="left">订单详情</el-divider>
              <el-descriptions :column="3" size="small">
                <el-descriptions-item label="租赁编号">{{history.rent_id}}</el-descriptions-item>
                <el-descriptions-item label="数量">{{history.number}}</el-descriptions-item>
                <el-descriptions-item label="价格">{{history.day_price===''?history.single_price+'/每小时':history.day_price+'/每天'}}（总价格：{{history.tol_rent_price}}元）</el-descriptions-item>
                <el-descriptions-item label="租赁时间段">{{history.starttime}}——{{history.endtime}}</el-descriptions-item>
                <el-descriptions-item label="租赁状态">
                  <el-switch
                    disabled
                    v-model="status"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="已完成">
                  </el-switch>
                </el-descriptions-item>
                <el-descriptions-item label="下单时间">{{history.rent_time}}</el-descriptions-item>
                <!--<el-descriptions-item label="收货地址">{{history.order_address}}</el-descriptions-item>-->
              </el-descriptions>

            </div>
          </div>
        </div>
      </el-card>
      <!--弹窗-->
      <el-dialog
        :visible.sync="dialogFormVisible"
        width="1000px">
        <!--商品信息-->
        <el-descriptions class="margin-top" title="商品信息" :column="3" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              出租方用户ID
            </template>
            {{goodList.my_user_id}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              出租方用户名
            </template>
            {{myUserIdName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品id
            </template>
            {{goodList.good_id}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品实物图
            </template>
            <template>
              <el-image style="width: 40px" :src="goodList.imgurl" :preview-src-list="[goodList.imgurl]">
              </el-image>
            </template>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品类型
            </template>
            {{goodList.category}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品名称
            </template>
            {{goodList.good_name}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              价格/小时
            </template>
            {{goodList.rent_price_hour}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              价格/天
            </template>
            {{goodList.rent_price_day}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              品牌
            </template>
            {{goodList.brand}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              支付状态
            </template>
            <el-tag size="small" :type="goodList.paystate=='0'?'danger':goodList.paystate=='2'?'':'success'">
              {{goodList.paystate==0?'未支付':'已支付'}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              发货状态
            </template>
            <el-tag size="small" :type="goodList.rent_state=='0'?'danger':goodList.rentState=='2'?'':'success'">
              {{goodList.rentState==0?'未发货':goodList.rentState==1?'已发货':'已收货'}}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              商品描述
            </template>
            {{goodList.description}}
          </el-descriptions-item>
        </el-descriptions>
          <el-descriptions class="margin-top" title="收货人信息" :column="3" size="medium" border>
          <el-descriptions-item>
            <template slot="label">
              收货人
            </template>
            {{orderAddress.userName}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              手机号
            </template>
            {{orderAddress.contactPhone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              订单地址
            </template>
            {{orderAddress.takeAddres}}
          </el-descriptions-item>
        </el-descriptions>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'RentHistory',
    data(){
      return{
        user:JSON.parse(window.sessionStorage.getItem('user')),
        tableData:[],
        goodList:{},
        keywords:'',
        rentState:2,
        status:true,
        dialogFormVisible:false,
        myUserIdName:'',
        orderAddress:{},
      }
    },
    mounted(){
      this.initTable();
    },
    methods:{
      initTable () {
        let userId = parseInt(this.user.userId);
        let url = '/rent/data/myRentHistory/?userId='+userId+'&&rentState='+this.rentState;
        this.postRequest(url).then(resp => {
          if (resp) {
            console.log(resp);
            this.tableData=resp;
          }
        })
      },
      showEditView(data){
        // 根据myUserId查出用户名/personal/data/userById/{userId}
        console.log(data.order_address)
        let userId=data.my_user_id;
        this.postRequest('/personal/data/userById/'+userId).then(resp => {
          if (resp) {
            console.log(resp);
            this.myUserIdName=resp;
          }
        })
        // 根据地址id查询订单地址
        this.getRequest('/rent/addressById/'+data.order_address).then(resp => {
          if (resp) {
            this.orderAddress=resp;
          }
        })
        Object.assign(this.goodList,data);
        this.dialogFormVisible=true;
      },
      doSearch(){
        this.initTable();
      },
    }
  }

</script>

<style>
  .user-container{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  .user-card{
    width: 100%;
    margin-bottom: 20px;
  }
  .avatar_img{
    width: 80px;
    height: 80px;
    border-radius: 72px;
    margin-right: 20px;
    margin-top: 25px;
  }
  .img-container{
    width: 100%;
    display: flex;
    margin-left: 10px;
  }
  .userinfo-container{
    font-size: 14px;
    color: cornflowerblue;
  }


</style>
